<!doctype html>
<html lang="en">
<head>
	<title>BarChart - Series Transition</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijbarchart.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			$("#wijbarchart").wijbarchart({
				axis: {
					y: {
						text: "Number of Hits",
						autoMax: false,
						max: 100,
						autoMin: false,
						min: 0

					},
					x: {
						text: "Month of the Year"
					}
				},
				hint: {
					content: function () {
						return this.data.label + '\n ' + this.y + '';
					}
				},
				stacked: true,
				clusterRadius: 5,
				seriesList: [createRandomSeriesList("2010")]
			});
		});


		function changeProperties() {
			var seriesTransition = {};
			enabled = $("#chkEnabled").is(":checked"),
				duration = $("#inpDuration").val(),
				easing = $("#selEasing").val();
			seriesTransition.enabled = enabled;
			if (duration && duration.length) {
				seriesTransition.duration = parseFloat(duration);
			}
			seriesTransition.easing = easing;
			$("#wijbarchart").wijbarchart("option", "seriesTransition", seriesTransition);
		}

		function reload() {
			$("#wijbarchart").wijbarchart("option", "seriesList", [createRandomSeriesList("2010")]);
		}

		function createRandomSeriesList(label) {
			var data = [],
				randomDataValuesCount = 12,
				labels = ["January", "February", "March", "April", "May", "June",
					"July", "August", "September", "October", "November", "December"],
				idx;
			for (idx = 0; idx < randomDataValuesCount; idx++) {
				data.push(createRandomValue());
			}
			return {
				label: label,
				legendEntry: false,
				data: { x: labels, y: data }
			};
		}

		function createRandomValue() {
			var val = Math.round(Math.random() * 100);
			return val;
		}
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Animation</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<input type="button" value="reload" onclick="reload()" />
			<div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<div>
					<label for="chkEnabled">
						Series Transition Settings: Enabled
					</label>
					<input id="chkEnabled" type="checkbox" checked="checked" />
					<label for="inpDuration">
						Duration
					</label>
					<input id="inpDuration" type="text" value="1000" />
					<label for="selEasing">
						Easing
					</label>
					<select id="selEasing">
						<option value=">">></option>
						<option value="<"><</option>
						<option value="<>"><></option>
						<option value="backIn">backIn</option>
						<option value="backOut">backOut</option>
						<option value="bounce">bounce</option>
						<option value="elastic">elastic</option>
					</select>
					<input type="button" value="Apply" onclick="changeProperties()" />
				</div>
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
<p>This sample demonstrates how to set the seriesTransition of your barcharts. This example uses the <b>seriesTransition</b> option of the bar chart.</p>
		
		</div>
	</div>
</body>
</html>
